<!-- 任务三级页面 --- 任务详情 --- 完成上报 -->
<template>
  <view class="page">
    <view class="box1">
      <view class="tit">
        完成时间
      </view>
       <view class="example-body">
        			<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
        </view>
    </view>
    <view class="box2">
      <view class="tit">
        实际用时
      </view>
      <view class="text">
        2h
      </view>
    </view>
    <view class="box3">
      <view class="tit">
        备注
      </view>
      <input type="text" placeholder="请输入备注">
    </view>
    <view class="box4">
      <view class="tit">
        照片
      </view>
       <view class="example-body">
      <uni-file-picker 
        v-model="imageValue" 
        fileMediatype="image" 
        mode="grid" 
        @select="select"   
        limit="1"
        ></uni-file-picker>
			</view>
    </view>
    <view class="submit">
      提 交
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        datetimesingle:'',
        imageValue:[]
      };
    },
    watch:{

    },
   methods:{
  changeLog(e) {
  	console.log('change事件:', e);
   },

      //图片上传
      select(e){
        console.log(e,'我是select');
        const tempFilePaths = e.tempFilePaths;
        //获取图片临时路径
        const imgUrl=tempFilePaths[0]
        uni.uploadFile({
          //图片上传地址
          url: '/achieve/add', 
          filePath: imgUrl,
          //上传名字，注意与后台接收的参数名一致
          name: 'pictures',
          // //设置请求头
          // header:{"Content-Type": "multipart/form-data"},
          //请求成功，后台返回自己服务器上的图片地址
          success: (uploadFileRes) => {
            console.log('uploadFileRes',JSON.parse(uploadFileRes.data));   
            //处理数据
            const path=JSON.parse(uploadFileRes.data)
            //赋值，前端渲染
            this.baseFormData.photo=path.imgUrl
          }
        });
      }, 
}
  }
</script>

<style lang="scss" scoped>
  .page {
    background-color: #f5faf9;
    box-sizing: border-box;
    padding: 20rpx 0;
    height: 1200rpx;
  }
  // 完成时间
.box1 {
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .example-body {
    width: 80%;
    ::v-deep.uni-date {
      width: 450rpx;
    }
  }
}
// 完成用时
.box2 {
  width: 100%;
  height: 120rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
// 备注
.box3 {
  width: 100%;
  height: 220rpx;
  margin-top: 20rpx;
  background-color: #fff;
}
// 上传图片
.box4 {
  width: 100%;
  height: 320rpx;
  margin-top: 20rpx;
  background-color: #fff;
}

.submit {
  width: 400rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background-color: #00aa7f;
  text-align: center;
  line-height: 100rpx;
  margin: 35rpx auto;
  font-size: 32rpx;
  font-weight: 700;
  color: #fff;
}

</style>
